<template>
	<BaseField v-bind="props" @outClick="emit('outClick')" :visible="visible">
		<div class="field-text" style="width: 100%">
			<div class="view" v-if="status === 'view'">
				<div v-if="isValid(modelValue)">
					{{ getValue(fieldType || "price", formObj, modelValue) }}
				</div>
				<span v-else>--</span>
			</div>
			<div class="edit" style="width: 100%" v-else>
				<!-- 货币 -->
				<a-input-number :size="size" ref="inputRef" @change="handleChange" hide-button v-model="dataValue" :placeholder="placeholder" :min="0">
					<template #prefix v-if="!arcoProps?.hiddenPre">
						<a-select
							:size="size"
							v-model="formObj.unit"
							:field-names="{ value: 'value', label: 'value' }"
							@popup-visible-change="(data) => (visible = data)"
							:trigger-props="{ contentStyle: { width: 'max-content', minWidth: '100%' } }"
							style="background-color: transparent; border: none; padding: 0;width: 50px;"
							:options="unitOptions"
							@change="handleUpdateExtra"
						/>
					</template>
					<template #suffix v-if="!arcoProps?.hiddenNext">
						<a-select
							:size="size"
							v-model="formObj.priceType"
							@popup-visible-change="(data) => (visible = data)"
							:trigger-props="{ contentStyle: { width: 'max-content', minWidth: '100%' } }"
							style="background-color: transparent; border: none; padding: 0;width: 50px;"
							:options="priceTypeOptions"
							@change="handleUpdateExtra"
						/>
					</template>
				</a-input-number>
			</div>
		</div>
	</BaseField>
</template>

<script setup lang="ts">
import { SelectInfo } from "@/utils";
import { useShowFieldList, getValue, useExtraData } from "@/utils/field";
import { useFocusFn } from "./utils/useFocus";
import { propsInfo } from "./utils/props";
import BaseField from "./BaseField.vue";
import { useI18n } from "@/hooks/useI18n";
import { isValid } from "@/utils/index";
const visible = ref(false);
const extraData = useExtraData();
const props = defineProps({
	...propsInfo,
	extra: {
		//额外字段
		type: [String, Object],
		default: ""
	}
});
const formObj = ref({
	unit: "",
	priceType: ""
});
watch(
	() => props.extra,
	(data) => {
		formObj.value = data || {};
	},
	{ immediate: true }
);
// 货币类型
const unitOptions = computed(() => {
	return extraData[2].find((i) => i.field === "unit")?.options;
});
// 货币单位
const priceTypeOptions = computed(() => {
	return extraData[2].find((i) => i.field === "priceType")?.options;
});
const inputRef = ref();
const { t } = useI18n();
const list = useShowFieldList();

useFocusFn(props, inputRef);
const placeholder = computed(() => {
	return t("base.placeholder") + (props.name || SelectInfo(list, props.fieldType || "price", "label", "fieldType"));
});
const emit = defineEmits(["update:modelValue", "update:fieldShow", "change", "outClick", "update:extra"]);

const dataValue = ref();
const textFn = (data) => {
	return Number(data);
};

const handleUpdate = () => {
	emit("update:modelValue", dataValue.value);
	emit("update:fieldShow", dataValue.value);
};

const handleChange = () => {
	handleUpdate();
	emit("change");
};
const handleUpdateExtra = () => {
	emit("update:extra", formObj.value);
	emit("change");
};
watch(
	() => props.modelValue,
	(data) => {
		dataValue.value = isValid(data) ? textFn(data) : "";
		handleUpdate();
	},
	{ immediate: true }
);
</script>

<style lang="scss"></style>
